<template>
	<view class="details">
		<view class="details-top">关于提升物业服务的调查</view>
		<view class="details-content" style="margin-top: 0;">
			<view class="details-content-left">
				<view>1</view>
			</view>
			<view class="details-content-right">
				<view style="font-size: 26rpx;">您对物业的满意程度</view>
				<view style="margin: 15rpx 0;">
					<uni-data-checkbox style="transform: scale(0.8); width:150%; margin-left: -100rpx;"
						:localdata="checkBox" />
				</view>
			</view>
		</view>

		<view class="details-content">
			<view class="details-content-left">
				<view>2</view>
			</view>
			<view class="details-content-right">
				<view style="font-size: 26rpx;">您对物业的满意程度</view>
				<view style="margin: 15rpx 0;">
					<uni-data-checkbox style="transform: scale(0.8); width:150%; margin-left: -100rpx;"
						:localdata="checkBox" />
				</view>
			</view>
		</view>

		<view class="details-content">
			<view class="details-content-left">
				<view>3</view>
			</view>
			<view class="details-content-right">
				<view style="font-size: 26rpx;">您对物业的满意程度</view>
				<view style="margin: 15rpx 0;">
					<uni-data-checkbox style="transform: scale(0.8); width:150%; margin-left: -100rpx;"
						:localdata="checkBox" />
				</view>
			</view>
		</view>

		<view class="details-content">
			<view class="details-content-left">
				<view>4</view>
			</view>
			<view class="details-content-right">
				<view style="font-size: 26rpx;">您对物业的满意程度</view>
				<view style="margin: 15rpx 0;">
					<uni-data-checkbox style="transform: scale(0.8); width:150%; margin-left: -100rpx;"
						:localdata="checkBox" />
				</view>
			</view>
		</view>

		<view class="details-content">
			<view class="details-content-left">
				<view>5</view>
			</view>
			<view class="details-content-right">
				<view style="font-size: 26rpx;">您对我们有什么建议</view>
				<view style="margin: 15rpx 0;">
					<textarea class="textarea" placeholder-style="color:#ccc" placeholder="请输入你的建议"/>
				</view>
			</view>
		</view>

		<view class="add_suggest_btn" @click="shadeAdd">提交</view>
		<view class="add_suggest_btn ggg" @click="navigateBack">返回</view>
		<!-- 遮罩层 -->
		<up-overlay :show="shade">
		</up-overlay>
	</view>
</template>

<script setup>
import { ref } from 'vue'
let checkBox = ref([
	{
		value: '1',
		text: '十分满意'
	},
	{
		value: '2',
		text: '满意'
	},
	{
		value: '3',
		text: '一般'
	},
	{
		value: '4',
		text: '不满意'
	}

])
let shade = ref(false)
const status = ref('loadmore');

let shadeAdd = () => {
	status.value = 'loading';
	shade.value = true;
	uni.showLoading({
		title: '正在提交，请稍后',
		mask: true
	});
	setTimeout(() => {
		shade.value = false;
		uni.hideLoading();
		// navigateBack()
		uni.showToast({
			title: '提交成功',
			duration: 1000
		});
		setTimeout(() => {
			navigateBack()
		}, 1000)

	}, 2000);
}

let navigateBack = () => {
	uni.navigateBack()
}

</script>

<style lang="scss" scoped>
.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
	font-size: 10rpx !important;
}
.textarea{
	background-color: #f2f2f2;
	height: 150rpx;
}

.details {
	height: calc(100vh - 90rpx);
	box-sizing: border-box;
	background-color: #f5f5f5;
	font-family: '微软雅黑', sans-serif;
	font-weight: 400;
	font-size: 24rpx;
	padding: 0 20rpx;
	box-sizing: border-box
}

.details-top {
	width: 100%;
	height: 80rpx;
	font-size: 24rpx;
	line-height: 80rpx;
	margin: 0 auto;
	text-align: center;
}

.details-content {
	background-color: #fff;
	display: flex;
	padding: 20rpx 0;
	box-shadow: 0 0 10rpx 0 #686868;
	margin-top: 30rpx;

	.details-content-left {
		width: 10%;

		view {
			background-color: #02a7f0;
			text-align: center;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 30%;
			color: #fff;
			margin: 0rpx auto;
		}
	}
}

.details-content-right {
	width: 90%;
}

.add_suggest_btn {
	margin-top: 30rpx !important;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	color: #fff;
	width: 98%;
	margin: 20rpx auto;
	background-color: #02a7f0;
	border-radius: 30rpx;
}

.ggg {
	background-color: #c5c5c5 !important;
}
</style>
